<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Bootstrap -->
    <link href="../../style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
</head>
<style>
    #add_btn2 {
        width: 85px;
        height: 38px;
        color: white;
        background: #f58f98;
    }
    #itemsName, #itemsUnit, #itemsTax, #itemsCost,#itemsAddTranCost,#itemsStoreCounts{
        width: 300px;
        display: inline-block;
        margin-top: 10px;
    }
    label{
        width: 146px;
    }
    #price_form2{
        margin-left: 15px;
    }
    label{
        font-weight: bold;
    }
    #return_btn {
        width: 85px;
        height: 38px;
        color: white;
        background: #fd7e14;
        margin-left: 35px;
    }
</style>
<body>
<div id="price_div">
    <form id="price_form2">

        <label>货物名称：</label>
        <input id="itemsName" name="itemsName" class="form-control" type="text"><br>
        <label>货物单位：</label>
        <input id="itemsUnit" class="form-control" type="text" name="itemsUnit"><br>
        <label>货物税率：</label>
        <input id="itemsTax" class="form-control" type="number" name="itemsTax" step = "0.1"><br>
        <label>货物成本单价：</label>
        <input id="itemsCost" class="form-control" type="number" name="itemsCost" step = "0.1"><br>
        <label>货物加工运输单价：</label>
        <input id="itemsAddTranCost" class="form-control" type="number" name="itemsAddTranCost" step = "0.1"><br>
        <label>货物库存量：</label>
        <input id="itemsStoreCounts" class="form-control" type="text" name="itemsStoreCounts"><br>

        <button type="button" @click="addPrice" id="add_btn2">保存</button>
        <button type="button" id="return_btn" @click="returnPriceList">返回</button>
    </form>

</div>
    <script src="../../style/jquery-3.3.1.js"></script>
    <script src="../../style/vue.js"></script>
    <script src="../../style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
    <script>
        $(function (json) {
            let app = new Vue({
                el: "#price_div",
                data: json,
                methods:{
                    addPrice:function (){
                        $.ajax({
                            type:"post",
                            url: "../../Price/addPrice",
                            data:$("#price_form2").serialize(),
                            dataType: "json",
                            success:function (data){
                                if(data.message=='添加成功'){
                                    alert("添加成功");
                                    location.href="price_list.html";
                                }

                            }
                        })
                    },
                    returnPriceList:function (){
                        location.href="price_list.html";
                    }
                }
            })
        })
    </script>
</body>
</html>